<section id="privilege">
    <div class="userList">
        <div class="orgTitle">组织架构</div>
        <div class="orgUser">
            <tree-privilege class="rbac-tissue" :key="index" @change="getPidData" :model="treeList" @getdata="getdata"></tree-privilege>
        </div>
    </div>
    <div class="privilegeList">
        <div class="privilegeType">
            <ul class="PT-left">
                <li v-for="(item,index) in tabList" @click="selectTab(index,item)" :class="tabIndex == index? 'selectTab':''"
                    v-if="permissions.indexOf(item.power) >-1">{{item.name}}</li>
            </ul>
            <div class="PT-right">
                <button class="btn s-btn-default mr-10" @click="showLayer('global')" v-if="permissions.indexOf('c230') > -1">全局默认权限</button>
                <button class="btn s-btn-default" @click="showLayer('customer')" v-if="permissions.indexOf('c231') > -1">客户管理员权限</button>
            </div>
        </div>
        <div class="privilegeSwitch" v-if="userType != null">
            <tree-row :model="privileges"  :orgp="orgprivileges" @getchild="getchildPri" @switchpri="switchpri"></tree-row>
        </div>

    </div>
    <!-- 授权权限 -->
    <div class="pop add-account-pop box-o-shadow" style="width:800px;height: 569px;overflow: hidden;" v-if="isPriLayer">
        <div class="head-pop font-16">
            <span>授权权限</span>
            <button class="fw-close absolute" @click="closeLayer">×</button>
        </div>
        <form id="add-user-form">
            <div class="content-pop" style="padding:14px 20px;max-height: 1000px;">
                <ul class="PT-left" style="width:212px ;background: #fff">
                    <li v-for="(item,index) in butList" @click="selectbut(index,item)" :class="butIndex == index? 'selectTab':''">{{item.name}}</li>
                </ul>
                <div class="privilegeSwitch" style="height:440px;overflow-y: auto;background: #fff">
                    <tree-row :model="defprivileges" :orgp="defaultAndcustomer" @getchild="getchildPri"   @switchpri="switchpri"></tree-row>
                </div>
            </div>
        </form>
    </div>
    <!-- 遮罩层 -->
    <div class="backdrop" style="" v-if="isPriLayer"></div>
</section>
<script src="modules/workbench/scripts/privilege_item.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/privilege_row.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/privilege.js" charset="utf-8"></script>

<style>
    #privilege {
        display: flex;
        height: 100%;
    }

    .userList {
        width: 230px;
        height: 100%;
        border: 1px solid rgba(229, 229, 229, 1);
    }

    .orgTitle {
        width: 100%;
        height: 46px;
        background: #EFEFEF;
        color: #A5AAB7;
        text-align: center;
        line-height: 46px;
        font-size: 14px;
    }

    .privilegeList {
        width: 795px;
        height: 100%;
        padding: 15px 20px;
        background: #fff;
        position: relative;
        z-index: 9;
    }

    .privilegeType {
        display: flex;
        justify-content: space-between
    }

    .PT-left {
        display: flex;
        border-radius: 4px;
        height: 34px;
        border: 1px solid rgba(229, 229, 229, 1);
    }

    .PT-left>li {
        width: 106px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
    }

    .PT-left li:first-child {
        border-radius: 4px 0 0 4px
    }

    .PT-left li:last-child {
        border-radius: 0 4px 4px 0
    }

    .selectTab {
        color: #fff;
        background: #565E99;
        margin-top: -1px;
    }
    .PT-right {
        display: flex
    }

    .privilegeSwitch {
        margin-top: 15px;
        padding: 17px 17px 17px 0;
        width: 100%;
        height: 566px;
        overflow-y: auto;
        box-shadow: 0px 0px 8px 0px rgba(214, 214, 214, 0.75) inset;
        border-radius: 4px;
        border: 1px solid rgba(229, 229, 229, 1);
    }

    .PS-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #666;
        font-size: 14px;
        margin-bottom: 20px;
    }
    .privilegeSwitch>div>.PS-box>.PS-title{
        font-weight: 500
    }
    .PS-item ul {
        padding-left: 12px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666;
        font-size: 14px;
        font-weight: 400;
        border-bottom: 1px solid #F1F1F1;
    }

    .switch {
        width: 30px;
        height: 17px;
        border-radius: 8.5px;
        padding: 0 2px;
    }

    .switch-on {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: #565E99
    }

    .switch-off {
        display: flex;
        align-items: center;
        background: #D4D4D4
    }

    .yuan {
        display: inline-block;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #fff;
    }

    .PS-title li:first-child {
        /* width: 650px; */
        display: flex;
        align-items: center;
    }
</style>